<template>
	<view>
		<view class="jinecontent" style="z-index: 1000;">
			<view class="status_bar">
			  <!-- 这里是状态栏 -->
			</view>
			<uni-nav-bar @clickLeft="back" @clickRight="tuiguang" left-icon="back" background-color="transparent" border="false" color="#ffffff" title="分享赚钱" rightText="推广明细"></uni-nav-bar>
			<view class="" style="text-align: center;">
				<image src="../../static/image/haoyouwenzi.png" mode="" class="fenxiangtupian"></image>
				<view class="text-fenxiang" style="margin-top: 18rpx;">成功完成任务可享有好友任务金额奖励收益</view>
				<view class="text-fenxiang" style="margin-top: 4rpx;">好友的好友完成任务享有奖励收益</view>
			</view>
		</view>
		<view class="" style="position: relative;top:-52rpx;padding:0 36rpx;">
			<view class="" style="background-color: #FFFFFF; border-radius:16rpx;" >
				<view class="" style="text-align: center;padding-top: 36rpx;">
					<image src="../../static/image/diandian.png" mode="" class="diandian"></image>
					<text class="fenxiangyaoqing">分享邀请</text>
					<image src="../../static/image/diandian.png" mode="" class="diandian"></image>
				</view>
				<view class="" style="margin-top: 30rpx">
					<view class="uni-flex" style="padding-left: 40rpx;" @tap="weixinFenxiang()">
						<image src="../../static/image/weixinfenxiang.png" mode="" class="wexin-tupian"></image>
						<view class="" style="margin-left: 22rpx;">
							<view class="weixnyao">微信邀请收徒</view>
							<view class="weixnyao-shuoming">分享好朋友一起来赚钱</view>
						</view>
					</view>
				</view>
				<view class="" style="margin-top: 52rpx">
					<view class="uni-flex" style="padding-left: 40rpx;" @tap="pengyouquanFenxiang()">
						<image src="../../static/image/pengyouquan.png" mode="" class="wexin-tupian"></image>
						<view class="" style="margin-left: 22rpx;">
							<view class="weixnyao">朋友圈邀请</view>
							<view class="weixnyao-shuoming">朋友圈晒图邀请</view>
						</view>
					</view>
				</view>
				<view class="" style="margin-top: 52rpx;padding-bottom: 46rpx;" @tap="qqFenxiang()">
					<view class="uni-flex" style="padding-left: 40rpx;">
						<image src="../../static/image/QQ.png" mode="" class="wexin-tupian"></image>
						<view class="" style="margin-left: 22rpx;">
							<view class="weixnyao">QQ邀请</view>
							<view class="weixnyao-shuoming">分享图片，一扫即用</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
	    components: {uniNavBar},
		data() {
			return {
				
			}
		},
		methods: {
			back:function(){
				uni.navigateBack();
			},
			tuiguang:function(){
				this.$util.toUrl("./tuiguangmingxi");
			},
			weixinFenxiang:function(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 0,
				    href: "http://test.zmwha.com?id="+uni.getStorageSync("token"),
				    title: "乐米",
				    summary: "欢迎使用乐米",
				    imageUrl: "http://admin.zmwha.com/js/userfiles/fileupload/202007/login_log2.png",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			pengyouquanFenxiang:function(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSenceTimeline",
				    type: 0,
				    href: "http://test.zmwha.com?id="+uni.getStorageSync("token"),
				    title: "乐米",
				    summary: "欢迎使用乐米",
				    imageUrl: "http://admin.zmwha.com/js/userfiles/fileupload/202007/login_log2.png",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			qqFenxiang:function(){
				// uni.share({
				//     provider: "qq",
				//     type: 0,
				//     href: "http://uniapp.dcloud.io/",
				//     title: "uni-app分享",
				//     summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				//     imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
				//     success: function (res) {
				//         console.log("success:" + JSON.stringify(res));
				//     },
				//     fail: function (err) {
				//         console.log("fail:" + JSON.stringify(err));
				//     }
				// });
				
				uni.share({
				    provider: "qq",
				    type: 2,
				    imageUrl: "http://admin.zmwha.com/js/userfiles/fileupload/202007/login_log2.png",
					href: "http://test.zmwha.com?id="+uni.getStorageSync("token"),
					title:"乐米",
					summary: "欢迎使用乐米",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
		}
	}
</script>

<style lang="scss">
	.weixnyao{
		height:48rpx;
		font-size:28rpx;
		font-weight:500;
		color:rgba(53,53,53,1);
		line-height:48rpx;
	}
	.weixnyao-shuoming{
		height:48rpx;
		font-size:28rpx;
		font-weight:400;
		color:rgba(102,102,102,1);
		line-height:48rpx;
	}
	.wexin-tupian{
		width: 80rpx;
		height: 80rpx;
		margin-top:8rpx;
	}
	.fenxiangyaoqing{
		height:56rpx;
		font-size:40rpx;
		font-weight:600;
		color:rgba(53,53,53,1);
		line-height:56rpx;
		padding: 0 20rpx;
	}
	.diandian{
		width: 36rpx;
		height: 26rpx;
	}
	page{
		background-color: $page-bg-color;
	}
	.fenxiangtupian{
		width: 476rpx;
		height: 56rpx;
		margin-top: 60rpx;
		
	}
	.text-fenxiang{
		height:40rpx;
		font-size:28rpx;
		font-weight:400;
		color:$uni-text-color-inverse;
		line-height:40rpx;
	}
	.jinecontent{
		width: 100%;
		height: 750rpx;
		background: url(../../static/image/beijingfenxiang.png) no-repeat;
		background-size: 100%;
	}
	.status_bar {
	    height: var(--status-bar-height);
	    width: 100%;
	}
</style>
